<template>
  <div class="join">
    <button class="btn btn-sm join-item w-10 bg-white" @click="reduce()" :disabled="disabled">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
        <path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z"
              clip-rule="evenodd"/>
      </svg>
    </button>
    <input class="input input-bordered join-item w-20 input-sm text-center"
           :value.number="modelValue" :disabled="disabled"
           @input="$emit('update:modelValue', $event.target.value)" />
    <button class="btn btn-sm join-item w-10 bg-white" @click="plus()" :disabled="disabled">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
        <path
            d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"/>
      </svg>
    </button>
  </div>
</template>

<script setup>
const count = ref('')

const props = defineProps({
  min: Number,
  max: Number,
  modelValue: Number,
  disabled: Boolean,
})

const emit = defineEmits(['update:modelValue'])

/**
 * 加
 */
function plus() {
  if (props.modelValue === '' || this.props.modelValue === undefined) {
    count.value = 1
  }else{
    count.value = props.modelValue
    count.value++
  }
  if(count.value > props.max){
    count.value = props.max
  }
  emit('update:modelValue', count.value)
}

/**
 * 减
 */
function reduce() {
  if (count.value === '' || this.props.modelValue === undefined) {
    count.value = props.min
  }else{
    count.value = props.modelValue
    count.value--
  }
  if(count.value < props.min){
    count.value = props.min
  }
  if(count.value > props.max){
    count.value = props.max
  }
  emit('update:modelValue', count.value)
}

</script>

<style scoped>

</style>